require(['config'], () => {
    require(['template', 'header', 'footer', 'leader'], (template) => {
        class Goods {
            constructor() {
                    this.getData().then(() => {
                        this.bigger()
                        this.changeImg()
                        this.chooseSize()
                        this.storeDetail()
                    })
                }
                // 数据渲染
            getData() {
                    return new Promise((resolve, reject) => {
                        let id = location.search.slice(location.search.indexOf("=") + 1)
                        $.ajax({
                            type: "get",
                            data: {
                                id,
                                normal: 1,
                                sa: ''
                            },
                            dataType: "json",
                            url: "/api/detail",
                            success: (resp) => {
                                // console.log(resp);
                                // 渲染图片列表
                                let html = template("small-img-template", {
                                    data: resp.data.detail.photo
                                })
                                $(".small-list ul").html(html)

                                // 渲染放大镜部分
                                let html2 = template("big-img-template", {
                                    data: resp.data.share
                                })
                                $(".box-big-pic").html(html2);
                                let html8 = template("biggest-img-template", {
                                    data: resp.data.share
                                })
                                $(".biggset-img").html(html8);

                                // 渲染左边信息部分
                                let html3 = template("info-top-template", {
                                    data: resp.data
                                })

                                $(".show-info-top").html(html3)
                                    // 渲染尺寸
                                let html4 = template("size-template", {
                                        data: resp.data.detail.tbItemReview.tags
                                    })
                                    // 渲染数量
                                $(".size-list ul").html(html4)
                                let numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                                let html5 = template("num-template", {
                                        data: numArr
                                    })
                                    // 渲染大图
                                $(".num-panel ul").html(html5)
                                let html6 = template("contain-img-template", {
                                    data: resp.data.detail.descContentList.slice(2, 12)
                                })
                                $(".contain-img").html(html6);

                                let html7 = template("goods-btn-template", {
                                    data: resp.data
                                })
                                $(".goods-btn").html(html7)
                                    // 选择完尺寸后储存商品信息
                                this.detail = {
                                    imgUrl: resp.data.share.imageUrl,
                                    title: resp.data.share.title,
                                    price: resp.data.detail.price,
                                    id: resp.data.detail.id
                                }
                                resolve()
                            }
                        })
                    })
                }
                // 放大镜
            bigger() {
                    $(".box-big-pic").mouseenter(() => {
                        $(".mask").show();
                        $(".biggset-img").show()
                    })
                    $(".box-big-pic").mouseleave(() => {
                        $(".mask").hide();
                        $(".biggset-img").hide()
                    })
                    $(".box-big-pic").mousemove((e) => {
                        // 设置遮罩层位置
                        $('.mask').css({
                            left: e.pageX - $('.box-big-pic').offset().left - $('.mask').width() / 2 + 'px',
                            top: e.pageY - $('.box-big-pic').offset().top - $('.mask').height() / 2 + 'px'
                        });
                        // 出界设置
                        var magX = $('.mask').position().left;
                        var magY = $('.mask').position().top;

                        var maxMagX = $('.box-big-pic').width() - $('.mask').width()
                        var maxMagY = $('.box-big-pic').height() - $('.mask').height()
                        if (magX <= 0) {
                            magX = 0
                        }
                        if (magX >= maxMagX) {
                            magX = maxMagX;
                        }
                        if (magY <= 0) {
                            magY = 0;
                        }
                        if (magY >= maxMagY) {
                            magY = maxMagY;
                        }
                        $('.mask').css('left', magX);
                        $('.mask').css('top', magY);

                        // 设置大图的位置
                        var originX = magX * 1.5;
                        var originY = magY * 1.5;
                        $('.biggset-img img').css({ left: -originX + 'px', top: -originY + 'px' });

                    })
                }
                // 设置图片联动效果
            changeImg() {
                    $(".small-list ul li").each(function() {
                        $(this).click(() => {
                            $(".box-big-pic img").attr("src", $(this).children("img").attr("src"))
                            $(".biggset-img img").attr("src", $(this).children("img").attr("src"))
                        })
                    })
                }
                // 选择尺寸和数量
            chooseSize() {
                    var _this = this
                    $(".current li a").each(function() {
                        $(this).click(() => {
                            $(".goods-size-cell input").val($(this).html())
                            _this.detail.size = $(".goods-size-cell input").val();
                        })
                    })
                    $(".num-list li ").each(function() {
                        $(this).click(() => {
                            $(".goods-num-cell input").val($(this).html())
                            _this.detail.num = parseInt($(".goods-num-cell input").val());
                        })
                    })
                }
                // 储存数据
            storeDetail() {
                $(".add-btn").click(() => {
                    if ($(".goods-num-cell input").val() == '' || $(".goods-size-cell input").val() == '') {
                        alert("请选择商品属性")
                        return;
                    }
                    let cart = localStorage.getItem("cart")
                    if (cart) {
                        cart = JSON.parse(cart)
                            // 判断购物车里是否存在当前商品
                        const isExist = cart.some(shop => {
                                return shop.id === this.detail.id;
                            })
                            // 如果存在当前商品就修改数量
                        if (isExist) {
                            cart.forEach(shop => {
                                if (shop.id === this.detail.id) {
                                    shop.num = shop.num + this.detail.num;
                                    // 字符串转数组
                                    var sizeArr = JSON.stringify(shop.size).slice(1)
                                    sizeArr = sizeArr.substr(0, sizeArr.length - 1)
                                    sizeArr = sizeArr.split(",")
                                        // 如果size已经存在，就只累加数量，如果不存在就添加size，并且添加数量
                                    const flag = sizeArr.some(size => {
                                        return size === this.detail.size
                                    })
                                    if (!flag) {
                                        shop.size = shop.size + "," + this.detail.size
                                    } else {
                                        shop.size
                                    }
                                }
                            })
                        } else {
                            cart.push({...this.detail, check: true })
                        }
                        localStorage.setItem("cart", JSON.stringify(cart))
                    } else {
                        localStorage.setItem("cart", JSON.stringify([{...this.detail, check: true }]))
                    }
                    alert("加入购物车成功啦  嘻嘻嘻嘻")
                })


            }

        }
        return new Goods();
    })
})